/*
 * @Description: 单位导航包裹组件
 * @Author: Rfan
 * @Date: 2022-02-10 13:40:29
 * @LastEditTime: 2022-06-20 19:37:06
 */

import { Menu, Select } from 'antd';
import classNames from 'classnames/bind';
import { observer } from 'mobx-react-lite';
import { memo, useEffect, useState } from 'react';
import { fetchATListByFondId } from '@/api/archivesType';
import { fetchFondsListByUnitId } from '@/api/fonds';
import { IArchiveType } from '@/interfaces/archiveType';
import { IFond } from '@/interfaces/fond';
import { appState } from '@/store/mobx';
import { selectItemByKey } from '@/utils/list';
import { useDictionaryContext } from '../contexts/DictionaryContext';

import styles from '../styles/navSidebar.module.scss';

const cx = classNames.bind(styles);

const { Option } = Select;

const NavSidebar = () => {
  const { setSelectFond, setSelectAT } = useDictionaryContext();

  // 全宗列表
  const [fondsList, setFondsList] = useState<IFond[]>([]);
  // 档案类型列表
  const [ATList, setATList] = useState<IArchiveType[]>([]);
  // 选中的全宗
  const [selectFondId, setSelectFondId] = useState(0);
  // 选中的档案类型id
  const [selectATId, setSelectATId] = useState(0);

  // 加载时获取全宗列表，获取成功后默认选中第一条并把第一条返回出去
  useEffect(() => {
    const selectUnit = appState.unitId;
    if (selectUnit) {
      fetchFondsListByUnitId(selectUnit).then((res) => {
        const _fondList: IFond[] = res.data;
        setFondsList(_fondList);
        setSelectFondId(_fondList[0].id);
      });
    }
  }, [appState.unitId]);

  // 切换全宗自动加载档案类型
  useEffect(() => {
    if (selectFondId) {
      fetchATListByFondId(selectFondId).then((res) => {
        const _atList: IArchiveType[] = res.data;
        setATList(_atList);
        setSelectATId(0);
        handleNavChange(selectFondId, 0);
      });
    }
  }, [selectFondId]);

  useEffect(() => {
    if (selectFondId) {
      handleNavChange(selectFondId, selectATId);
    }
  }, [selectATId]);

  const handleNavChange = (fondId: number, atId: number) => {
    setSelectFond(selectItemByKey(fondId, fondsList));
    if (atId === 0) {
      setSelectAT({ id: 0 });
    } else {
      setSelectAT(selectItemByKey(atId, ATList));
    }
  };

  /**
   * @description: 切换全宗
   * @param {number} val 选中的全宗
   */
  const handleFondChange = (val: number) => {
    setSelectFondId(val);
  };

  /**
   * @description: 切换档案类型
   * @param {any} param1
   */
  const onATSelect = ({ key }: any) => {
    setSelectATId(parseInt(key, 10));
  };

  return (
    <>
      <div className={cx('container')}>
        <Select value={selectFondId} style={{ width: '100%' }} onChange={handleFondChange}>
          {fondsList.map((fond) => (
            <Option key={fond.id} value={fond.id}>
              {fond.fondName}
            </Option>
          ))}
        </Select>
        <div className={cx('at-list-wrap')}>
          <Menu selectedKeys={[`${selectATId}`]} onSelect={onATSelect} style={{ width: 200 }}>
            <Menu.Item key={0}>公共字典</Menu.Item>
            {ATList.map((item: IArchiveType) => (
              <Menu.Item key={item.id}>{item.atName}</Menu.Item>
            ))}
          </Menu>
        </div>
      </div>
    </>
  );
};

export default memo(observer(NavSidebar));
